<template>
    <view class="cart">
        <view class="content">
            <view class="list" v-for="item in list" :key='item.id'>
                <view class="left">
                    <image :src="item.img" class="img"></image>
                </view>
                <view class="center">
                    <view class="name">
                        {{item.name}}
                    </view>
                    <view class="size">
                        尺寸：{{item.size}}
                    </view>
                    <view class="count">
                        数量：x{{item.count}}
                    </view>
                </view>
                <view class="right">
                    <view class="price">
                        单价￥{{item.price}}元
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>
<script>
    export default {
        data() {
            return {
                list: [
					{
					        id: '0',
					        name: '好吃的虾',
					        price: 10,
					        count: 1,
					        size: '大份',
					        img: '/static/all.jpg'
					    },
				], //列表数据
                isAllChecked: false, //是否全选
                totalPrice: 0, //总价
				isEditStatus: true, // 当前页面状态 默认是信息显示页面
				isShow:true
            }
        },
        methods: {
			
        },

    }
</script>
<style lang="scss" scoped>
    page {
        background: #f1e8e7;
    }
    .content {
        width: 750rpx;
        margin: -11rpx auto 20rpx;
    }

    // 居中显示
    @mixin textCenter {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .list {
        width: 750rpx;
        height: 208rpx;
        background: #f9f9f9;
        box-shadow: 0 8rpx 16rpx 0 rgba(83, 66, 49, 0.08);
        border-radius: 24rpx;
        margin-top: 32rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .left {
            display: flex;

            .img {
                width: 136rpx;
                height: 136rpx;
                margin-left: 10rpx;
                border-radius: 8%;
            }
        }

        .center {
            width: 170rpx;

            .name {
                font-size: 26rpx;
                color: #3E3E3E;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .size,
            .count {
                font-size: 22rpx;
                color: #8D8D8D;
            }
        }

        .right {
            .price {
                margin-top: 40rpx;
                font-size: 26rpx;
                margin-left: 40rpx;
            }

            // 加减数量
            .update-count {
                margin-top: 40rpx;
                display: flex;

                .reduce,
                .add {
                    width: 40rpx;
                    height: 40rpx;
                    background: #F1ECE7;
                    border-radius: 21.6rpx;
                    color: #979797;
                    @include textCenter;
                    font-size: 50rpx;
                }

                .cart-count {
                    width: 72rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                    background: #F1ECE7;
                    border-radius: 21.6rpx;
                    margin-left: 18rpx;
                    margin-right: 18rpx;
                    text-align: center;
                }
            }
        }
    }
</style>